<template>
	<view :style="{'padding-top': top,'z-index': '999'}">
		<view class="searchs pd_lr10">
			<view class="search_item_left"
				@click="childInput(search)"
				v-if="showLeft">
				<slot name="left"></slot>
			</view>
			<view @click="goSearch"
				class="search_item" style="position: relative;" :style="{'--bg-color':bgColor}">
				<image v-show="search"
					style="width: 50rpx;height: 50rpx;position: absolute;right:20rpx;top:10rpx;"
					:src="xcxImgUrl && xcxImgUrl+'close.svg'"
					@click.stop="searchClear"></image>
				<!-- <input class="uni-input" focus placeholder="自动获得焦点" /> -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入查询内容"
					border="surround"
					shape="circle"
					v-model="search" 
					prefixIcon="search"
					@confirm="childInput"
					:disabled="disabled"
					:adjustPosition='false'
					@focus="focusFn"
					@blur="isFocus = false"
					style="border-radius: 15px;
					padding-left: 10px;
					 line-height: 30px;
					 height: 30px;"
					@input="nativeInput"
					prefixIconStyle="font-size: 22px;color: #909399;">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入查询内容"
						border="surround"
						shape="circle"
						v-model="search"
						prefixIcon="search"
						:disabled="disabled"
						:adjustPosition='false'
						
						style="border-radius: 15px;
						background-color: #f5f5f5;
                        padding-left: 10px;
                         line-height: 30px;
                         height: 30px;"
						@input="updateInput"
						prefixIconStyle="font-size: 22px;color: #909399;">
						<!-- #endif -->

						<image slot="prefix"
							style="width: 28rpx;height: 28rpx;"
							:src="xcxImgUrl && xcxImgUrl+'search.svg'"
							@click="searchBlur"></image>
							
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
			</view>
			<view class="search_item_right"
				v-if="showRight">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		props: {
			searchFn:{
				type:Function,
				default:() => {}
			},
			showLeft: {
				type: Boolean,
				default: false
			},
			showRight: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#f5f5f5'
			},
			//距离顶部距离 默认需要计算
			showTop: {
				type: Boolean, //true 需要计算 false 不需要计算
				default: true
			},
			isLinks: { //是否可跳转 true 是
				type: Boolean,
				default: true
			},
			disabled: { //是否禁用
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isFocus:false,
				top: '', //距离顶部位置
				search: '', //绑定值
				// 判断是否还在继续输入
				timer: null
			};
		},
		mounted() {
			//判断是否需要计算距离顶部距离加内边距撑开 父组件传值 
			if (this.showTop) {
				// 计算顶部位置
				this.top = (this.$store.state.statusBarHeight + this.$store.state.navBarHeight) * 2 + 'rpx'
			}
			this.search = this.$store?.state?.searchName || ''

		},
		options: {
			styleIsolation: 'shared',
		},
		onHide() {
			this.searchClear()
		},
		methods: {
			focusFn(){
				console.log(999)
				this.isFocus = true;
				console.log(this.isFocus)
			},
			updateInput(e){
				if(e){
					this.isFocus = true;
				}else{
					this.isFocus = false;
				}
				this.$emit('updateInput',e);
			},
			childInput(e){
				console.log(9)
				this.$emit('childInput',e);
			},
			//去搜索页面
			goSearch() {
				console.log(this.isLinks);
				if (this.isLinks) {
					uni.navigateTo({
						url: '/page_public/search'
					})
				}
			},
			//输入框失去焦点
			searchBlur() {
				// 如果timer不为空就表明在持续输入,每次改变都清除定时，这样就可以实现只输入最后一次结果(注意每次间隔如果超过500毫秒就会输出)
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.$emit('searchBlur', this.search)
				}, 500)
			},
			// 清空输入框
			searchClear() {
				console.log('111111111');
				// if (this.timer !== null) clearTimeout(this.timer)
				this.$store.commit('updateSearch', '') //清空vuex
				// this.timer = setTimeout(() => {
					this.$emit('searchBlur', '')
				// }, 500)
				this.search = '';
			},
			nativeInput(e){
				this.$emit('nativeInput',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-input__content__field-wrapper__field {
		margin-right: 20rpx !important;
	}
	/deep/.u-input_content_clear {
		font-size: 20rpx !important;
	}
	.searchs {
		height: 88rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search_item {
			flex: auto;
		}

		.search_item_left,
		.search_item_right {
			width: 48rpx;
			display: flex;
			align-items: center;
			position: relative;
		}

		.search_item_left {
			margin-right: 20rpx;
		}

		.search_item_right {
			margin-left: 20rpx;
		}

		.search_item /deep/.u-input {
			padding: 8rpx 18rpx !important;
			font-size: $font_size_14;
			background-color: var(--bg-color);
			border: none;
		}



	}
	.search_item /deep/.u-input__content__field-wrapper{
		flex:initial!important;
		width: calc(100% - 100rpx);
		margin-right: 50rpx;
	}
	.search_item /deep/input{
		
	}
</style>